<template>
  <view>
    <z-paging
      ref="paging"
      v-model="dataList"
      bg-color="#f8f8f8"
      auto-show-system-loading
      @query="getList"
    >
      <view slot="top">
        <view class="top-box">
          <view :style="{ height: navBarHeight }">
            <view
              class="navbar-title"
              :style="{ 'padding-top': statusBarHeight + 'px' }"
            >
              <image
                @click="barnk()"
                class="return"
                src="/static/images/return.png"
              ></image>
              <view class="navbar-name">我的客户</view>
              <view></view>
            </view>
          </view>
          <view class="user-info">
            <view class="user-img">
              <image class="user-head" :src="userInfo.avatar" />
            </view>
            <view class="info">
              <view class="head">
                <view class="flex">
                  <view class="name">{{ userInfo.nickName }}</view>
                  <image
                    v-if="userInfo.memberLevel != 0"
                    class="vip"
                    src="/static/images/my/vip.png"
                  >
                  </image>
                </view>
              </view>
              <view class="balance">
                <view class="flex">
                  <view class="num">{{ mineGroup.directNumber || 0 }}</view>
                  <view class="text">直推人数</view>
                </view>
                <view class="flex">
                  <view class="num">{{ mineGroup.indirectNumber || 0 }}</view>
                  <view class="text">间推人数</view>
                </view>
                <!--              <view class="flex">
                  <view class="num">{{ mineGroup.potentialNumber || 0 }}</view>
                  <view class="text">潜在客户</view>
                </view> -->
              </view>
            </view>
          </view>
          <view class="myTeam">
            <view class="title">
              <view>我的团队</view>
              <view
                class="lookInfo"
                @click="pageTo('/subPages/promotion/myTeam')"
                >查看详情
                <u-icon name="arrow-right" color="#848484" size="18"></u-icon>
              </view>
            </view>
            <view class="Money">
              <view class="week">
                <view class="weeknum">{{
                  mineGroup.weekPerformance || 0
                }}</view>
                <view class="weekLabel">本周业绩</view>
              </view>
              <view class="week">
                <view class="weeknum">{{
                  mineGroup.totalPerformance || 0
                }}</view>
                <view class="weekLabel">累计业绩</view>
              </view>
            </view>
          </view>
          <view class="filter">
            <view class="filteri">
              <view class="label">等级名称</view>
              <view class="value">
                <uni-data-select
                  style="height: 28px"
                  size="mini"
                  v-model="level"
                  :localdata="range"
                  @change="changeLevel"
                ></uni-data-select>
              </view>
            </view>
            <view class="filteri">
              <view class="label">加入时间</view>
              <view class="value">
                <uni-datetime-picker
                  type="datetime"
                  @maskClick="datetimePicker = false"
                  v-model="datetimesingle"
                  @change="changeLog"
                >
                  <view class="temp" @click="datetimePicker = true">
                    {{
                      datetimesingle ? datetimesingle.slice(0, 10) : "请选择"
                    }}
                    <u-icon
                      v-if="!datetimePicker"
                      name="arrow-down-fill"
                      color="#ff4254"
                      size="10"
                    ></u-icon>
                    <u-icon
                      v-else
                      name="play-right-fill"
                      color="#ff4254"
                      size="10"
                    ></u-icon>
                  </view>
                </uni-datetime-picker>
              </view>
            </view>
            <view class="filtery">
              <view class="label">用户ID</view>
              <view class="value">
                <u-search
                  bgColor="#fff"
                  placeholder="用户ID查询"
                  showAction
                  v-model="nickName"
                  @custom="search"
                  @search="search"
                ></u-search>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="list-box">
        <view class="btn-bottom">
          <view v-for="(item, index) in ['我的直推成员', '我的间推成员']">
            <view
              @click="btnCl(index)"
              :class="[btnIndex == index ? 'clazz' : '']"
            >
              {{ item }}
              <view v-if="btnIndex == index" class="xian"> </view>
            </view>
          </view>
        </view>

        <view v-for="(item, index) in dataList" :key="index" class="OtherTeami">
          <view class="OtherTeam">
            <view class="image">
              <image :src="item.avatar"></image>
            </view>
            <view class="teamIntro">
              <view class="nameAmedal">
                <view class="team_name">{{ item.nickName }}</view>
                <view class="medal">
                  <image
                    v-if="item.vipLevel == 1"
                    style="width: 86rpx; height: 47rpx; margin-right: 8rpx"
                    src="/static/images/my/vip.png"
                  ></image>
                  <image
                    v-if="item.vipLevel == 2"
                    style="width: 86rpx; height: 47rpx; margin-right: 8rpx"
                    src="/static/images/my/svip.png"
                  ></image>
                  <image
                    v-if="item.agencyLevel == 3"
                    style="width: 113rpx; height: 33rpx; margin-right: 8rpx"
                    src="/static/images/my/gxdz.png"
                  ></image>
                  <image
                    v-if="item.agencyLevel == 4"
                    style="width: 78rpx; height: 33rpx; margin-right: 8rpx"
                    src="/static/images/my/lc.png"
                  ></image>
                  <image
                    v-if="item.agencyLevel == 5"
                    style="width: 147rpx; height: 33rpx; margin-right: 8rpx"
                    src="/static/images/my/yyzx.png"
                  ></image>
                  <image
                    v-if="item.agencyLevel == 6"
                    style="width: 78rpx; height: 33rpx"
                    src="/static/images/my/zc.png"
                  ></image>
                </view>
              </view>
              <view class="ID">ID: {{ item.sysUserid }}</view>
              <view class="phoneTime">
                {{
                  item.phonenumber
                    ? `${item.phonenumber.slice(
                        0,
                        3
                      )}****${item.phonenumber.slice(7)}`
                    : ""
                }}
                &nbsp;&nbsp;&nbsp;{{ item.createTime }}加入
              </view>
            </view>
          </view>
          <!-- <view class="divider">TA的团队</view> -->
          <view class="teamInfo">
            <view class="teamInfoi">
              <view class="teamInfoi_num">{{ item.orderSize || 0 }}</view>
              <view class="teamInfoi_Label">订单数</view>
            </view>
            <view class="teamInfoi">
              <view class="teamInfoi_num">{{ item.performance || 0 }}</view>
              <view class="teamInfoi_Label">总业绩</view>
            </view>
            <view class="teamInfoi">
              <view class="teamInfoi_num">{{ item.earnings || 0 }}</view>
              <view class="teamInfoi_Label">收入</view>
            </view>
          </view>
          <view style="border-bottom: 3px solid #cbcbcb; margin-right: 30rpx">
          </view>
          <view class="teamInfo">
            <view class="teamInfoi">
              <view class="teamInfoi_Label">VIP礼包消费统计</view>
              <view class="teamInfoi_num">{{
                item.totalPayMoneyLevelVip || 0
              }}</view>
            </view>
            <view class="teamInfoi">
              <view class="teamInfoi_Label">代理礼包消费统计</view>
              <view class="teamInfoi_num">{{
                item.totalPayMoneyOther || 0
              }}</view>
            </view>
            <view class="teamInfoi">
              <view class="teamInfoi_Label">单品消费统计</view>
              <view class="teamInfoi_num">{{
                item.totalPayMoneyNull || 0
              }}</view>
            </view>
          </view>
        </view>
      </view>
      <view slot="empty">
        <Empty />
      </view>
    </z-paging>
  </view>
</template>

<script>
import mineApi from "@/api/mine";
export default {
  name: "Store",
  data() {
    return {
      btnIndex: 0,
      dataList: [],
      navBarHeight: "",
      system: [],
      statusBarHeight: 0, //状态栏的高度
      userInfo: null,
      mineGroup: {},
      level: null,
      datetimePicker: false,
      datetimesingle: "",
      nickName: "",
      range: [
        {
          value: 1,
          text: "VIP",
        },
        {
          value: 2,
          text: "SVIP",
        },
        {
          value: 3,
          text: "共享店主",
        },
        {
          value: 4,
          text: "联创",
        },
        {
          value: 5,
          text: "区域运营中心",
        },
        {
          value: 6,
          text: "总裁",
        },
      ],
    };
  },

  async onLoad() {
    this.navBarHeight = this.$store.getters.heightData.navBarHeight + "px";
    //获取系统信息
    uni.getSystemInfo({
      success: (res) => {
        this.system = res;
      },
    });
    this.statusBarHeight = this.system.statusBarHeight; //状态栏高度
    this.getMineGroup();
  },
  async onShow() {
    this.userInfo = uni.getStorageSync("userInfo");
  },
  methods: {
    btnCl(row) {
      this.btnIndex = row;
      this.getList(1, 10);
    },
    getMineGroup() {
      mineApi.getMineGroupNew().then((res) => {
        if (res.code == 200) {
          this.mineGroup = {
            directNumber: res.rows[0].userOneLevelNumber, // 直推人数
            indirectNumber: res.rows[0].userTwoLevelNumber, // 间推人数
            // potentialNumber: res.data.potentialNumber, // 潜在客户
            weekPerformance: res.rows[0].thisWeekPerformance, // 本周业绩
            totalPerformance: res.rows[0].teamPerformance, // 累计业绩
          };
        }
      });
    },
    getList(pageNum, pageSize) {
      let params = {
        pageNum,
        pageSize,
        userMemberLevel: this.level,
        // level: this.level,
        joinDate: this.datetimesingle.slice(0, 10),
        // nickName: this.nickName,
        nikeNameOrPhoneNumber: this.nickName,
      };
      if (!this.datetimesingle) {
        delete params.joinDate;
      }
      if (!this.level) {
        delete params.userMemberLevel;
      }
      if (!this.nickName) {
        delete params.nikeNameOrPhoneNumber;
      }
      // if (!this.level) {
      //   delete params.level;
      // }
      // if (!this.nickName) {
      //   delete params.nickName;
      // }
      if (this.btnIndex == 1) {
        params.isOne = 1;
      } else {
        delete params.isOne;
      }
      mineApi
        .getElseGroupNew(params)
        .then((res) => {
          if (res.code == 200) {
            if (this.btnIndex == 1) {
              this.$refs.paging.complete(res.rows.bdmUserTwoVoList);
            } else {
              this.$refs.paging.complete(res.rows.bdmUserVoList);
            }
          }
        })
        .catch(() => {
          this.$refs.paging.complete(false);
        });
    },
    getElseGroup() {},
    changeLevel() {
      this.$refs.paging.reload();
    },
    barnk() {
      uni.navigateBack({
        delta: 1, // delta值为1时表示返回的页面层数
      });
    },
    changeLog(e) {
      this.$refs.paging.reload();
      this.datetimePicker = false;
    },
    search() {
      this.$refs.paging.reload();
    },
    pageTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.btn-bottom {
  margin: 30rpx 0;
  font-weight: bold;
  display: flex;
  width: 100%;
  gap: 30rpx;

  .xian {
    width: 70rpx;
    height: 10rpx;
    background-color: red;
    border-radius: 20rpx;
    margin-top: 10rpx;
  }

  .clazz {
    color: red;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.flex {
  display: flex;
  align-items: center;
}

.top-box {
  width: 100%;
  background-image: url("https://lm.bwmonlinestore.com/prod-api/profile/upload/2025/01/07/bg_clent_20250107185645A023.png");
  background-size: 100%;
  background-repeat: no-repeat;

  .navbar-title {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .return {
      width: 48rpx;
      height: 48rpx;
      margin-left: 20rpx;
    }
  }

  .navbar-name {
    color: #222222;
    text-align: center;
    font-family: "PingFang SC";
    font-size: 36rpx;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    opacity: 0.9;
    margin-left: -20rpx;
  }

  .user-info {
    display: flex;
    padding: 30rpx 28rpx 20rpx 28rpx;

    .user-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 20rpx;

      .user-head {
        width: 120rpx;
        height: 120rpx;
      }
    }

    .info {
      flex: 1;
      display: flex;
      justify-content: space-around;
      flex-direction: column;

      .head {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .name {
          color: #000000;
          font-family: "PingFang SC";
          font-size: 36rpx;
          font-style: normal;
          font-weight: 500;
          line-height: normal;
          opacity: 0.9;
        }

        .vip {
          width: 86rpx;
          height: 47rpx;
        }
      }

      .balance {
        display: flex;

        .num {
          color: #000;
          font-size: 34rpx;
          margin: 0 15rpx;
          line-height: 34rpx;
        }

        .text {
          font-size: 24rpx;
          line-height: 34rpx;
        }
      }
    }
  }

  .myTeam {
    width: 96%;
    height: 180rpx;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 16rpx 24rpx;
    margin: 2%;

    .title {
      display: flex;
      width: 100%;
      height: 50rpx;
      justify-content: space-between;
      font-size: 34rpx;
      font-weight: 600;

      .lookInfo {
        display: flex;
        align-items: center;
        font-weight: 200;
        font-size: 28rpx;
        color: #848484;
      }
    }

    .Money {
      width: 100%;
      height: 60%;
      display: flex;

      .week {
        width: 50%;
        height: 130rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;

        .weeknum {
          color: #000;
          font-size: 34rpx;
        }

        .weekLabel {
          color: #848484;
          font-size: 26rpx;
        }
      }
    }
  }

  .filter {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 0 24rpx;

    .filteri {
      width: calc(50%);
      height: 110rpx;
      display: flex;
      align-items: center;

      .label {
        color: #000;
        font-size: 26rpx;
      }

      .value {
        margin-left: 4px;
        width: calc(100% - 60px);
        background-color: #fff;
        border-radius: 6px;

        ::v-deep .uni-select {
          border: none;
        }
      }

      .temp {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 70rpx;
        border-radius: 6px;
      }
    }

    .filtery {
      width: 100%;
      height: 110rpx;
      display: flex;
      align-items: center;
      margin: 10rpx 0;

      .label {
        color: #000;
        font-size: 26rpx;
      }

      .value {
        margin-left: 6px;
        width: calc(100% - 60px);
        background-color: #fff;
        height: 70rpx;
        border-radius: 8px;
        display: flex;
        align-items: center;
        padding-left: 4px;
      }
    }
  }
}

.list-box {
  padding: 0 24rpx;

  .title {
    width: 100%;
    font-size: 34rpx;
    font-weight: 600;
    margin: 10rpx 0;
  }

  .OtherTeami {
    width: 100%;
    background-color: #fff;
    border-radius: 16rpx;
    padding: 20rpx 0 20rpx 30rpx;
    margin: 30rpx 0;

    .OtherTeam {
      width: 100%;
      height: 120rpx;
      display: flex;
      align-items: center;

      .image {
        display: flex;
        justify-content: center;
        align-items: center;

        image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 50%;
        }
      }

      .teamIntro {
        width: calc(100% - 70px);
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        margin-left: 10rpx;

        .nameAmedal {
          display: flex;

          .team_name {
            color: #000;
            font-weight: 600;
            font-size: 32rpx;
          }

          .medal {
            flex: 1;
            height: 40rpx;
            display: flex;
            align-items: center;
            margin-left: 4rpx;
          }
        }

        .ID {
          color: #838383;
        }

        .phoneTime {
          color: #ff5b6b;
        }
      }
    }

    .divider {
      color: #000;
      font-weight: 600;
      width: 100%;
      height: 60rpx;
      line-height: 60rpx;
    }

    .teamInfo {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;

      .teamInfoi {
        flex: 1;

        .teamInfoi_num {
          color: #000;
          font-weight: 600;
          font-size: 30rpx;
        }

        .teamInfoi_Label {
          color: #838383;
        }
      }
    }
  }
}
</style>
